<template>
  <div class="bg-gray-100">
    <div class="bg-blue-500 h-72">
      <div class="container py-8">
        <!-- banner -->
        <h2 class="text-3xl text-white text-center font-bold mb-4">Request for Quotation</h2>
        
        <div class="flex justify-around mt-8 mb-8">
          <div class="w-60 flex flex-col items-center">
            <div class="icon-container">
              <img src="@/assets/img/edit.png" />
            </div>
            <p class="text-lg mt-4 text-white text-center">1. Add Part to Below Form or Upload BOM Form</p>
          </div>
          <div class="w-60 flex flex-col items-center">
            <div class="icon-container">
              <img src="@/assets/img/information.png" />
            </div>
            <p class="text-lg mt-4 text-white text-center">1. Fill in Your Contact Information</p>
          </div>
          <div class="w-60 flex flex-col items-center">
            <div class="icon-container">
              <img src="@/assets/img/upload.png" />
            </div>
            <p class="text-lg mt-4 text-white text-center">1. Submit the RFQ Form</p>
          </div>
          <div class="w-60 flex flex-col items-center">
            <div class="icon-container">
              <img src="@/assets/img/waiting.png" />
            </div>
            <p class="text-lg mt-4 text-white text-center">1. We will contact you within 24 Hours</p>
          </div>
        </div>
      </div>
    </div>
    <section class="p-12">
      <div class="container mx-auto px-4">
        <div>
          <p class="mb-4">
            1. Please complete the following form with request model of detail
            and your contact information to get a quote.
          </p>
          <p class="mb-4">
            2. After we received your request, Our sales team will send
            quotation to you by email within 24 hours, or contact us.
            (info@augto.com)
          </p>
          <p class="mb-4">
            3. If the quantity of purchase is close to the whole package
            quantity, it is recommended to order according to the whole package
            inquiry, so as to facilitate transportation and storage.
          </p>
        </div>
        <!-- table -->
        <table class="w-full border-collapse">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-4 py-3 text-left text-sm font-medium text-gray-600 border">Part Number.</th>
              <th class="px-4 py-3 text-left text-sm font-medium text-gray-600 border">Manufacturer</th>
              <th class="px-4 py-3 text-left text-sm font-medium text-gray-600 border">Package</th>
              <th class="px-4 py-3 text-left text-sm font-medium text-gray-600 border">Date Code</th>
              <th class="px-4 py-3 text-left text-sm font-medium text-gray-600 border">Quantity</th>
              <th class="px-4 py-3 text-left text-sm font-medium text-gray-600 border">Target Price</th>
              <th class="px-4 py-3 text-center text-sm font-medium text-gray-600 border w-48">Actions</th>
            </tr>
          </thead>
          
          <tbody>
            <template v-for="(row, index) in rfq.tableData" :key="row.id">
              <!-- 数据行 -->
              <tr class="hover:bg-gray-50">
                <td class="px-4 py-3 border">
                  <input 
                    type="text"
                    v-model="row.partNo"
                    class="w-full px-2 py-1 border rounded focus:outline-none focus:border-primary"
                    placeholder="Enter part no."
                  >
                </td>
                <td class="px-4 py-3 border">
                  <input 
                    type="text"
                    v-model="row.manufacturer"
                    class="w-full px-2 py-1 border rounded focus:outline-none focus:border-primary"
                    placeholder="Enter manufacturer"
                  >
                </td>
                <td class="px-4 py-3 border">
                  <input 
                    type="text"
                    v-model="row.package"
                    class="w-full px-2 py-1 border rounded focus:outline-none focus:border-primary"
                    placeholder="Enter package"
                  >
                </td>
                <td class="px-4 py-3 border">
                  <input 
                    type="text"
                    v-model="row.datecode"
                    class="w-full px-2 py-1 border rounded focus:outline-none focus:border-primary"
                    placeholder="Enter datecode"
                  >
                </td>
                <td class="px-4 py-3 border">
                  <input 
                    type="number"
                    v-model="row.quantity"
                    class="w-full px-2 py-1 border rounded focus:outline-none focus:border-primary"
                    placeholder="Enter quantity"
                    min="1"
                  >
                </td>
                <td class="px-4 py-3 border">
                  <input 
                    type="number"
                    v-model="row.targetPrice"
                    class="w-full px-2 py-1 border rounded focus:outline-none focus:border-primary"
                    placeholder="Enter price"
                    step="0.01"
                    min="0"
                  >
                </td>
                <td class="px-4 py-3 border">
                  <div class="flex justify-center space-x-2">
                    <button 
                      @click="toggleRemarks(index)"
                      class="px-3 py-1 text-sm rounded border hover:bg-gray-50"
                      :class="row.showRemarks ? 'bg-blue-50 text-primary border-primary' : ''"
                    >
                      Remarks
                    </button>
                    <button 
                      @click="removeRow(index)"
                      class="px-3 py-1 text-sm text-red-500 rounded border border-red-500 hover:bg-red-50"
                    >
                      Delete
                    </button>
                  </div>
                </td>
              </tr>
              
              <!-- 备注行 -->
              <tr v-if="row.showRemarks" class="bg-gray-50">
                <td colspan="8" class="px-4 py-3 border">
                  <div class="flex items-center justify-end space-x-2">
                    <span class="text-sm text-gray-500">Remarks:</span>
                    <input 
                      type="text"
                      v-model="row.remarks"
                      class="flex-1 px-2 py-1 border rounded focus:outline-none focus:border-primary"
                      placeholder="Enter remarks"
                    >
                  </div>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
        <div class="flex justify-start gap-4 mt-4">
          <button 
            @click="addRow"
            class="px-4 py-2 text-sm bg-primary text-white border border-primary rounded hover:bg-blue-500"
          >
            Add Part
          </button>
          <button 
            @click="removeAll"
            class="px-4 py-2 text-sm text-red-500 border border-red-500 rounded hover:bg-red-50"
          >
            Remove All
          </button>
        </div>
        <div class="mt-8">
          <h3 class="text-2xl font-bold mb-4">Contact Information</h3>
          <p>
            <!-- (You can also <a href="#">Log in</a> and fill in automatically.) -->
          </p>
          <el-form ref="ruleFormRef" :model="contactInfo" label-width="150px" :rules="rules">
            <el-form-item label="Contact Name*" prop="contactName">
              <el-input
                v-model="contactInfo.contactName"
                placeholder="Please input contact name"
              />
            </el-form-item>
            <el-form-item label="Company Name*" prop="companyName">
              <el-input
                v-model="contactInfo.companyName"
                placeholder="Please input company name"
              />
            </el-form-item>
            <el-form-item label="Business Email*" prop="businessEmail">
              <el-input
                v-model="contactInfo.businessEmail"
                type="email"
                placeholder="Please input business email"
              />
            </el-form-item>
            <el-form-item label="Telephone" prop="telephone">
              <el-input
                v-model="contactInfo.telephone"
                placeholder="Please input Telephone"
              />
            </el-form-item>
            <el-form-item label="Country"   prop="country">
              <el-select
                v-model="contactInfo.country"
                placeholder="Please select your country"
              >
                <el-option label="China" value="China" />
                <el-option label="USA" value="USA" />
                <el-option label="UK" value="UK" />
              </el-select>
            </el-form-item>
            <el-form-item label="Remarks">
              <el-input v-model="contactInfo.remarks" type="textarea" />
            </el-form-item>
            <el-form-item label="Verification Code*" prop="verificationCode">
              <div class="flex items-center gap-4">
                <el-input
                  v-model="contactInfo.verificationCode"
                  placeholder="Please input verification code"
                />
                <Verification v-model:code="captchaCode" />
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleRfqList(ruleFormRef)"
                >SUBMIT RFQ</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </section>
    
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import Verification from '@/components/Verification.vue'
import { useRfqStore } from '@/store/rfqStore'
const { $request } = useNuxtApp()
import type { FormInstance, FormRules } from 'element-plus'
const rfq = useRfqStore()

const router = useRouter();
const ruleFormRef = ref<FormInstance>()
// interface TableRow {
//   id: number
//   partNo: string
//   manufacturer: string
//   package: string
//   datecode: string
//   quantity: number | null
//   targetPrice: number | null
//   remarks: string
//   showRemarks: boolean
// }

const contactInfo = ref({
  contactName: '',
  companyName: '',
  businessEmail: '',
  telephone: '',
  country: '',
  remarks: '',
  verificationCode: '',
})

const rules = reactive<FormRules>({
  contactName: [
    { required: true, message: 'Please input contactName', trigger: 'blur' },
  ],
  companyName: [
    {
      required: true,
      message: 'Please input companyName',
      trigger: 'blur',
    },
  ],
  businessEmail: [
    {
      type: 'email',
      required: true,
      message: 'Please input businessEmail',
      trigger: 'blur',
    },
  ],
  telephone: [
    {
      required: true,
      message: 'Please input telephone',
      trigger: 'blur',
    },
  ],
  country: [
    {
      required: true,
      message: 'Please select country',
      trigger: 'change',
    },
  ],
  verificationCode: [
    {
      required: true,
      message: 'Please input verificationCode',
      trigger: 'blur',
    },
  ],
})

const refreshVerificationCode = () => {
  contactInfo.verificationCode = Math.random().toString(36).substring(2, 7).toUpperCase();
}

const captchaCode = ref('')

const submitRFQ = () => {
  router.push('/rfq-result');
}


// 添加新行
const addRow = () => {
  rfq.addRow()
}

// 删除指定行
const removeRow = (index: number) => {
  rfq.removeRow(index)
}

// 删除所有行
const removeAll = () => {
  rfq.removeAll()
}

// 切换备注显示状态
const toggleRemarks = (index: number) => {
  rfq.toggleRemarks(index)
}

// 提交RFQ列表
const handleRfqList = async(formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      console.log('submit!')
      const params = {
        Name: contactInfo.value.contactName,
        Company: contactInfo.value.companyName,
        Country: contactInfo.value.country,
        Email: contactInfo.value.businessEmail,
        Telephone: contactInfo.value.telephone,
        Remarks: contactInfo.value.remarks,
        RFQForms: rfq.tableData.map((item) => {
          return {
            PartNo: item.partNo,
            MFG: item.manufacturer,
            Package: item.package,
            DateCode: item.datecode,
            Quantity: item.quantity,
            TargetPrice: item.targetPrice,
            Remarks: item.remarks
          }
        })
      }
      console.log(params);

      try {
        const response = await $request.post('/api/v1/rfq/rfqsubmitasync', params)
        console.log('RFQ response:', response)
        router.push('/rfq-result');
        // 提交成功后显示弹框
      } catch (error) {
        console.error('Error sending RFQ:', error)
      }
    } else {
      console.log('error submit!')
    }
  })
  
}



</script>

<style scoped lang="scss">
.icon-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 12px;
  img {
    width: 100%;
    object-fit: contain;
  }
}
</style>
